<!--
 * @Author: 你的名字
 * @Date: 2023-01-11 15:09:39
 * @FilePath: /demo-gather/src/views/DrawerBox/DrawerBox.vue
 * @Description: 
-->
<template>
    <div class="maxBox">
      <!-- 左侧容器 -->
      <div class="leftBox" ref="leftNode">
        <div v-if="play">内容</div>
      </div>
      <!-- 点击容器 -->
      <div ref="btnNode" class="btnBox" @click="toggle" :title="title">
        <img v-if="play" src="https://i.postimg.cc/c4zMGwGj/sq.png" class="imageBox" />
        <img v-else src="https://i.postimg.cc/c4zMGwGj/sq.png" class="imageBox" />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        play: true, //默认显示左侧容器
        title: "点击收起", //鼠标触摸提示文字
      };
    },
    methods: {
      toggle() {
        this.play = !this.play;
        //通过点击事件判断play的样式
        if (this.play) {
          this.$refs.btnNode.style =
            "transform:rotate(360deg);left:30%;transition:0.3s";
          this.$refs.leftNode.style = "width:30%;transition:0.3s";
          this.title = "点击收起";
        } else {
          this.$refs.btnNode.style =
            "transform:rotate(180deg);left:0px;transition:0.3s";
          this.$refs.leftNode.style = "width:0px;transition:0.3s";
          this.title = "点击展开";
        }
      },
    },
  };
  </script>
  
  <style scoped>
  /* 最外层的盒子 */
  .maxBox {
    width: 100%;
    height: 100%;
    background: cornflowerblue;
    position: relative;
  }
  /* 左侧容器样式 */
  .leftBox {
    position: absolute;
    width: 30%;
    height: 100%;
    background: cadetblue;
  }
  /* 点击容器样式 */
  .btnBox {
    position: absolute;
    top: calc(50% - 40px);
    left: 30%;
    cursor: pointer;
    z-index: 999;
  }
  /* icon图片的样式 */
  .imageBox {
    width: 35px;
    height: 80px;
  }
  </style>
  
  